<template>
    <div class="search-section">
      <div class="search-box">
        <el-input
          v-model="input"
          placeholder="搜索组任务名称、描述或负责人..."
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      
      <div class="filter-buttons">
        <el-select v-model="groupFilter" placeholder="选择团队" clearable style="width: 150px">
          <el-option label="前端团队" value="frontend" />
          <el-option label="后端团队" value="backend" />
          <el-option label="设计团队" value="design" />
          <el-option label="测试团队" value="test" />
        </el-select>
        <el-button type="primary" :icon="Plus">新建组任务</el-button>
        <el-button :icon="Refresh">刷新</el-button>
      </div>
    </div>

    <!-- 组任务统计卡片 -->
    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-icon total">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ tableData.length }}</div>
          <div class="stat-label">总组任务数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon in-progress">
          <el-icon><Clock /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ getInProgressCount() }}</div>
          <div class="stat-label">进行中</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon completed">
          <el-icon><Check /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ getCompletedCount() }}</div>
          <div class="stat-label">已完成</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon pending">
          <el-icon><Timer /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ getPendingCount() }}</div>
          <div class="stat-label">待开始</div>
        </div>
      </div>
    </div>

    <!-- 组任务表格 -->
    <div class="table-section">
      <el-table 
        :data="tableData" 
        style="width: 100%"
        class="task-table"
        stripe
        border
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column prop="优先级" label="优先级" width="100">
          <template #default="{ row }">
            <el-tag 
              :type="getPriorityType(row.优先级)" 
              size="small"
              class="priority-tag"
            >
              {{ row.优先级 }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="名称" label="组任务名称" width="200">
          <template #default="{ row }">
            <div class="task-name">{{ row.名称 }}</div>
          </template>
        </el-table-column>
        
        <el-table-column prop="描述" label="描述" min-width="250">
          <template #default="{ row }">
            <div class="task-description">{{ row.描述 }}</div>
          </template>
        </el-table-column>
        
        <el-table-column prop="所属团队" label="所属团队" width="120">
          <template #default="{ row }">
            <el-tag 
              :type="getTeamType(row.所属团队)" 
              size="small"
              class="team-tag"
            >
              {{ row.所属团队 }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="状态" label="状态" width="120">
          <template #default="{ row }">
            <el-tag 
              :type="getStatusType(row.状态)" 
              size="small"
              class="status-tag"
            >
              {{ row.状态 }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="任务类型" label="任务类型" width="120">
          <template #default="{ row }">
            <el-tag 
              type="info" 
              size="small"
              class="type-tag"
            >
              {{ row.任务类型 }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="创建时间" label="创建时间" width="160">
          <template #default="{ row }">
            <div class="time-text">{{ formatTime(row.创建时间) }}</div>
          </template>
        </el-table-column>
        
        <el-table-column prop="完成时间" label="完成时间" width="160">
          <template #default="{ row }">
            <div class="time-text">{{ formatTime(row.完成时间) }}</div>
          </template>
        </el-table-column>
        
        <el-table-column prop="负责人" label="负责人" width="100">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar size="small" class="user-avatar">{{ row.负责人.charAt(0) }}</el-avatar>
              <span class="user-name">{{ row.负责人 }}</span>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="参与人" label="参与人" width="150">
          <template #default="{ row }">
            <div class="participants">
              {{ row.参与人 }}
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="进度" label="进度" width="120">
          <template #default="{ row }">
            <el-progress 
              :percentage="row.进度" 
              :color="getProgressColor(row.进度)"
              :stroke-width="8"
            />
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="120" fixed="right">
          <template #default>
            <el-button type="primary" size="small" :icon="Edit">编辑</el-button>
            <el-button type="danger" size="small" :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { 
  Search, 
  Plus, 
  Refresh, 
  Document, 
  Clock, 
  Check, 
  Timer, 
  Edit, 
  Delete 
} from '@element-plus/icons-vue'

const input = ref('')
const groupFilter = ref('')

// 生成组任务假数据
const tableData = ref([
  {
    优先级: '高',
    名称: '用户界面重构项目',
    描述: '对整个系统的用户界面进行重构，提升用户体验和视觉效果',
    所属团队: '前端团队',
    状态: '进行中',
    任务类型: '重构任务',
    创建时间: '2024-01-10 09:00:00',
    完成时间: '2024-03-15 18:00:00',
    负责人: '张前端',
    参与人: '李前端, 王前端, 赵前端',
    进度: 65
  },
  {
    优先级: '中',
    名称: '数据库架构优化',
    描述: '优化数据库架构，提升查询性能和系统稳定性',
    所属团队: '后端团队',
    状态: '已完成',
    任务类型: '优化任务',
    创建时间: '2024-01-05 14:30:00',
    完成时间: '2024-01-25 16:00:00',
    负责人: '李后端',
    参与人: '张后端, 王后端',
    进度: 100
  },
  {
    优先级: '低',
    名称: '设计系统规范制定',
    描述: '制定统一的设计系统规范，确保产品设计的一致性',
    所属团队: '设计团队',
    状态: '待开始',
    任务类型: '规范任务',
    创建时间: '2024-01-20 10:00:00',
    完成时间: '2024-02-10 17:00:00',
    负责人: '王设计',
    参与人: '李设计, 赵设计',
    进度: 0
  },
  {
    优先级: '高',
    名称: '自动化测试体系建设',
    描述: '建立完整的自动化测试体系，提升代码质量和发布效率',
    所属团队: '测试团队',
    状态: '进行中',
    任务类型: '建设任务',
    创建时间: '2024-01-15 11:00:00',
    完成时间: '2024-02-28 15:00:00',
    负责人: '赵测试',
    参与人: '张测试, 李测试, 王测试',
    进度: 45
  },
  {
    优先级: '中',
    名称: 'API接口标准化',
    描述: '统一API接口规范，提升前后端协作效率',
    所属团队: '后端团队',
    状态: '进行中',
    任务类型: '标准化任务',
    创建时间: '2024-01-12 13:00:00',
    完成时间: '2024-02-20 12:00:00',
    负责人: '张后端',
    参与人: '李后端, 王后端, 赵后端',
    进度: 80
  },
  {
    优先级: '高',
    名称: '移动端适配优化',
    描述: '优化移动端适配，确保在各种设备上的良好体验',
    所属团队: '前端团队',
    状态: '已完成',
    任务类型: '优化任务',
    创建时间: '2024-01-08 09:00:00',
    完成时间: '2024-01-30 18:00:00',
    负责人: '李前端',
    参与人: '张前端, 王前端',
    进度: 100
  }
])

// 获取优先级对应的标签类型
const getPriorityType = (priority: string) => {
  switch (priority) {
    case '高': return 'danger'
    case '中': return 'warning'
    case '低': return 'info'
    default: return 'info'
  }
}

// 获取团队对应的标签类型
const getTeamType = (team: string) => {
  switch (team) {
    case '前端团队': return 'primary'
    case '后端团队': return 'success'
    case '设计团队': return 'warning'
    case '测试团队': return 'info'
    default: return 'info'
  }
}

// 获取状态对应的标签类型
const getStatusType = (status: string) => {
  switch (status) {
    case '进行中': return 'primary'
    case '已完成': return 'success'
    case '待开始': return 'info'
    default: return 'info'
  }
}

// 获取进度条颜色
const getProgressColor = (progress: number) => {
  if (progress >= 80) return '#67c23a'
  if (progress >= 50) return '#e6a23c'
  return '#f56c6c'
}

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return '-'
  return time.split(' ')[0] // 只显示日期部分
}

// 统计函数
const getInProgressCount = () => {
  return tableData.value.filter(item => item.状态 === '进行中').length
}

const getCompletedCount = () => {
  return tableData.value.filter(item => item.状态 === '已完成').length
}

const getPendingCount = () => {
  return tableData.value.filter(item => item.状态 === '待开始').length
}
</script>

<style scoped lang="less">
.search-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  .search-box {
    flex: 1;
    max-width: 400px;
    
    .search-input {
      :deep(.el-input__wrapper) {
        border-radius: 6px;
        box-shadow: 0 0 0 1px #dcdfe6 inset;
        
        &:hover {
          box-shadow: 0 0 0 1px #c0c4cc inset;
        }
        
        &.is-focus {
          box-shadow: 0 0 0 1px #409eff inset;
        }
      }
    }
  }
  
  .filter-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
  }
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  
  .stat-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    }
    
    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      font-size: 20px;
      color: white;
      
      &.total {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      &.in-progress {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      
      &.completed {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      
      &.pending {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }
    
    .stat-content {
      .stat-number {
        font-size: 24px;
        font-weight: 600;
        color: #303133;
        line-height: 1;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        color: #909399;
      }
    }
  }
}

.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .task-table {
    :deep(.el-table__header) {
      th {
        background: #f5f7fa !important;
        color: #606266 !important;
        font-weight: 600;
      }
    }
    
    :deep(.el-table__row) {
      &:hover {
        background-color: #f5f7fa !important;
      }
    }
  }
  
  .priority-tag {
    font-weight: 500;
  }
  
  .team-tag {
    font-weight: 500;
  }
  
  .status-tag {
    font-weight: 500;
  }
  
  .type-tag {
    font-weight: 500;
  }
  
  .task-name {
    font-weight: 500;
    color: #303133;
  }
  
  .task-description {
    color: #606266;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .time-text {
    font-size: 12px;
    color: #909399;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .user-avatar {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-weight: 500;
    }
    
    .user-name {
      font-size: 14px;
      color: #303133;
    }
  }
  
  .participants {
    font-size: 12px;
    color: #606266;
    line-height: 1.4;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .group-task-container {
    padding: 16px;
  }
  
  .search-section {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    
    .search-box {
      max-width: none;
    }
    
    .filter-buttons {
      justify-content: center;
      flex-wrap: wrap;
    }
  }
  
  .stats-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .stats-section {
    grid-template-columns: 1fr;
  }
}
</style>